<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-lx-cascades"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item> 商户管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/merchant' }">商户管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="BusinessesManager">

            <!-- 头部 -->
            <header>
                <el-form ref="form" label-position="left" :model="form" label-width="75px">

                    <el-row type="flex" :gutter="40">
                        <el-col :span="10" :offset="1">
                            <el-form-item label="客户名称:" prop="name">
                                <el-input v-model="form.name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="门店地址:" prop="address">
                                <el-input v-model="form.address"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row type="flex" align="bottom" :gutter="20">
                        <el-col :span="1.5" :offset="1">
                            <el-button type="primary" @click="select">筛选</el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button type="primary">导出</el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button type="text" size="mini" @click="resetForm">清空筛选条件</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </header>
            <!-- 表格 -->
            <el-table max-height="301" :data="tableData" border
                :header-cell-style="{ background: '#fff !important', fontWeight: 'normal', textAlign: 'center' }"
                :row-style="{ height: '65px' }" style="width: 100%;margin-top: 10px;">
                <el-table-column align="center" prop="name" label="用户名称">
                </el-table-column>
                <el-table-column align="center" prop="address" label="门店地址">
                </el-table-column>
                <el-table-column align="center" prop="director" label="负责人">
                </el-table-column>
                <el-table-column align="center" prop="createdate" label="注册时间">
                </el-table-column>
                <el-table-column align="center" prop="state" label="审核状态">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.state == '0' ? 'danger' : 'success'" disable-transitions>{{
                            scope.row.state == 0 ? '已拒绝' : '已通过' }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="150" prop="id" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="handleEdit(scope.row.id)">详情</el-button>
                        <!-- <el-button type="primary" size="mini" @click="handleDelete(scope.row.id)">审核</el-button> -->
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页器 -->
            <div class="block" align="right">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="query.pageNum" :page-sizes="[1, 2, 5, 7]" :page-size="query.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { selectmerchant } from '@/api/businessesManager'
export default {
    components: { selectmerchant },
    mounted() {
        this.getData()
    },

    methods: {
        // 初始化表格数据
        async getData() {
            let result = await selectmerchant(this.$qs.stringify(this.query))
            if (result.code == 200) {
                this.tableData = result.data.list
                this.pageTotal = result.data.total
            } else if (result.code == 400) {
                this.tableData = []
            }
        },
        //跳转详情页面
        handleEdit(id) {
            // console.log(id);
            // this.$router.push('managerindex')
            this.$router.push({ path: '/managerindex', query: { id } })
        },
        //审核按钮函数
        // handleDelete(id) {

        // },
        // 改变每页显示数据
        handleSizeChange(val) {
            // 回到第一页
            this.query.pageNum = 1
            this.query.pageSize = val
            this.getData();
        },
        // 点击不同页数
        handleCurrentChange(val) {
            this.query.pageNum = val
            this.getData();
        },
        // 筛选查询
        select() {
            this.query.name = this.form.name
            this.query.address = this.form.address
            this.query.pageNum = 1
            this.getData();
            this.$message({
                message: '查询完成',
                type: 'success'
            });
        },
        // 清空筛选条件
        resetForm() {
            this.$refs.form.resetFields();
            this.select()
            return false;
        }
    },

    data() {
        return {
            query: {
                name: "",
                address: '',
                pageNum: 1,   //当前第几页
                pageSize: 2,  //每页多少条数据
                id: 0
            },
            form: {
                name: '',
                address: '',

            },
            tableData: [],
            pageTotal: 0,   //总数据
            loading: false
        };
    },
};
</script>

<style  scoped>
.BusinessesManager {
    border: 1px solid #ebeef5;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    height: 90%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
}

h4 {
    font-weight: 540;
}

header {
    background-color: #f5f5f5;
    padding: 20px 0;
    margin-top: 15px;
    box-sizing: border-box;
}
</style>
